<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar">
			<view class="top_view"></view>  
		</view>  
		<!-- #endif --> 	
		
		<uni-nav-bar fixed="true" left-icon="false" :status-bar="true" :border="false"  class="NavBar">
				<view class="topTitle" style="display: flex;align-items: center;width: 680rpx;margin-left: -170rpx;">
					<view style="position: relative;" class="inputBox">
						<image @click="adddately()" class="searchBtn" style="width: 40upx;height: 40upx;" src="/static/images/search2.png" mode=""></image>
						<input maxlength="20"  @confirm="adddately()"  class="input1" type="text" placeholder="请输入搜索关键字" v-model="searchValue" />
						<!-- @input="onKeyUserNameInput" -->
						<view class="empty" @click="empty()">×</view>
					</view>
					<view class="cancel" @click="cancel()">取消</view>
				</view>
		</uni-nav-bar>
	
		
		<view class="flex NavBox">
			<view style="text-align: center;width: 50%;font-size: 32rpx;" v-for="(item,index) in NavList" :key="index" :class="num==index?'active':''" @click="NavBtn(index)">{{item}}</view>
		</view>
		
		<view style="background-color: #FFFFFF;" v-if="IsShow">
			<view >
				<view class="title flex">
					<view class="">搜索历史</view>
					<view @click="delSearchHistory()" class="history">清空历史</view>
				</view>
				
				<view class="products">
					<view v-if="index<10" v-for="(item,index) in historyList" :key="index"  class="productName fs18 C666" @click="ClickHistory('',item.key_word)">{{item.key_word}}</view>
				</view>
			</view>
			
			<view class="">
				<view style="clear: both;" class="title">
					<view class="">直播类别</view>			
				</view>
				<view class="products">
					<view @click="ClickHistory(item.gc_id,item.gc_name)"  v-for="(item,index) in roomClassList" :key="index"  class="productName fs18 C666">{{item.gc_name}}</view>
				</view>
			</view>
			<view class="title">
				<view class="">猜你喜欢</view>			
			</view>
			<view class="TvBox flex wrap">
				<view class="TvList" v-for="(item,index) in roomList" :key="index"  @click="ToTv(item.room_id,item.room_number,item.play_url,item.member_name,item.member_id,item.identity)">
					<view class="BgImg"><image style="width: 100%;height: 100%;" :src="item.room_cover" mode=""></image></view>
					<view class="audience flex">
						<view class="flex" style="justify-content:start;" v-if="item.status==0"><text class="spot"></text>回放</view>
						<view class="flex" style="justify-content:start;" v-if="item.status==1"><text class="spot2">直播中</text></view>
						<view class=""><image style="width: 30rpx;" src="../static/images/audienceIco.png" mode="widthFix"></image> {{item.visits}}</view>
					</view>
					<view class="Info">
						<view class="Title">{{item.member_name}}</view>
						<view class="">
							<view class="">{{item.title}}</view>
							<view class=""></view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
		
		<!-- 搜索列表 -->
		<view v-if="!IsShow">
			<!-- 直播搜索结果 -->
			<view v-if="num==0">
				<view class="TvBox flex wrap">
					<view class="TvList" v-for="(item,index) in TvList" :key="index" @click="ToTv(item.room_id,item.room_number,item.play_url,item.member_name,item.member_id,item.identity)">
						<view class="BgImg"><image style="width: 100%;height: 100%;" :src="item.room_cover" mode=""></image></view>
						<view class="audience flex">
							<view class="flex" style="justify-content:start;" v-if="item.status==0"><text class="spot"></text>回放</view>
							<view class="flex" style="justify-content:start;" v-if="item.status==1"><text class="spot2">直播中</text></view>
							<view class=""><image style="width: 30rpx;" src="../static/images/audienceIco.png" mode="widthFix"></image> {{item.visits}}</view>
						</view>
						<view class="Info">
							<view class="Title">{{item.member_name}}</view>
							<view class="">
								<view class="">{{item.title}}</view>
								<view class=""></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		
			<!-- 视频搜索结果 -->
			<view v-if="num==1">
				<view class="TvBox flex wrap">
					<view class="TvList" v-for="(item,index) in TvList" :key="index" @click="Todetails(item.id,index)">
						<view class="BgImg"><image style="width: 100%;height: 100%;" :src="item.cover_url" mode=""></image></view>
						<view class="Info ">
							<view class="Title">{{item.member_name}}</view>
							<view class="flex">
								<view style="width: 100px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;">{{item.title}}</view>
								<view class=""><image style="width: 30rpx;" src="../static/images/audienceIco.png" mode="widthFix"></image> {{item.visits}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 用户搜索结果 -->
			<view v-if="num==2">
				<view class="UserList flex" v-for="(item,index) in TvList" :key="index">
					<view class="portrait"><image :src="item.member_avatar||'../../static/images/headp.png'" mode=""></image></view>
					<view class="UserInfo">
						<view class="Name">{{item.member_name}} <image :src="item.member_sex?'../../static/images/female.png':'../../static/images/male.png' " mode=""></image></view>
						<!-- <image src="../../static/images/male.png" mode=""></image> -->
						<view class="autograph">{{item.sign_text}}</view>
					</view>
					<view class="follow" :class="item.is_follow?'bgeee':''" @click="follow(index,item.is_follow,item.member_id)">{{item.is_follow?'已关注':'＋关注'}}</view>
				</view>
			</view>
			
			<view class="" v-if="TvList.length<=0">
				<image style="width: 100%;" :src="`${picUrl}/InfoNull.png`" mode="widthFix"></image>
			</view>
		</view>
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue:"",
				NavList:["直播","视频","用户"],
				num:0,
				IsShow:true,
				roomClassList:[],
				historyList:[],
				roomList:[],
				TvList:[],
				VideoList:[],
				UserList:[],
				curpage:1
			}
		},
		onLoad() {
			this.getInfo();
			this.getclass();
		},
		onReachBottom(e) {
			if(this.curpage){
				this.searchRoom('',true)
			}else{
				uni.showToast({
					title:"到底了哦~~",
					icon:"none"
				})
			}
		},
		
		
		methods: {
			Todetails(voideid,index){//视频详情
				// nvue中
				// #ifdef APP-NVUE
					plus.storage.setItem('voideid', voideid)
					// plus.storage.setItem('voideindex', index)
				// #endif
				// h5中
				// #ifndef APP-NVUE
					uni.setStorageSync('voideid', voideid);
					// uni.setStorageSync('voideindex', index);
				// #endif
				uni.navigateTo({
					url:"/live/video/details?voideid="+voideid+"&index="+index
				})
			},
			ToTv(room_id,room_number,play_url,member_name,member_id,identity){
				console.log(play_url)
				play_url=play_url||"http://play.ehmall.com.cn/live/1400424696_"+member_id+"_"+identity+"_main.flv"
				uni.setStorageSync("flv",play_url)
				uni.setStorageSync("room_number",room_number)
				uni.setStorageSync("room_id",room_id)
				uni.navigateTo({
					url:"/live/live/details?room_id="+room_id+"&room_number="+room_number+'&flv='+play_url+'&live_member_name='+member_name+"&identity="+identity
				})
			},
			
			
			
			follow(index,is_follow,member_id){//关注用户
				if(is_follow){
					this.$util.request({//取消关注
						url: '/mobile/index.php?act=live&op=cancelFollowAnchor',
						method: 'get',
						data: {member_id:member_id},
					}).then((res)=>{
						if (res.error_code == 0) {
							this.TvList[index].is_follow=0
						} else {
							uni.showToast({
								title: res.message,
								icon: "none"
							});
						}
					})
				}else{
					this.$util.request({//关注
						url: '/mobile/index.php?act=live&op=followAnchor',
						method: 'get',
						data: {member_id:member_id},
					}).then((res)=>{
						if (res.error_code == 0) {
						  uni.showToast({
						  	title:"关注成功",
							icon:"none"
						  });
						  this.TvList[index].is_follow=1
						} else {
							uni.showToast({
								title: res.message,
								icon: "none"
							});
						}
					})
				}
			},
			delSearchHistory(){//删除历史记录
				this.$util.request({
					url: '/mobile/index.php?act=live&op=delSearchHistory',
					method: 'get',
					data: {},
				}).then((res)=>{
					if (res.error_code == 0) {
					  uni.showToast({
					  	title:"清空成功",
					  });
					  this.historyList=[]
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						});
					}
				})
			},
			cancel(){//取消按钮
				this.IsShow=true
				this.searchValue=""
				uni.navigateBack({})
			},
			ClickHistory(gcid,keyword){//直播类别按钮
				if(gcid){
					this.num=0;
				}
				this.IsShow=false
				// this.searchValue=keyword
				this.searchRoom(gcid)
			},
			searchUser(){//搜索用户
				this.$util.request({
					url: '/mobile/index.php?act=live&op=searchUser',
					method: 'get',
					data: {},
				}).then((res)=>{
					if (res.error_code == 0) {
					  this.UserList=res.datas.list
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						});
					}
				})
			},
			searchVideo(){//搜索短视频
				this.$util.request({
					url: '/mobile/index.php?act=live&op=searchVideo',
					method: 'get',
					data: {
						keyword:this.searchValue
					},
				}).then((res)=>{
					if (res.error_code == 0) {
					  this.VideoList=res.datas.list
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						});
					}
				})
			},
			searchRoom(gcid="",seater){//搜索直播间
			// index.php?act=live&op=searchLiveRoom
				this.$util.request({
					url: '/mobile/index.php?act=live&op=searchDistribute',
					method: 'get',
					data: {
						keyword:this.searchValue,
						gc_id:gcid,
						search_type:this.num+1,
						curpage:this.curpage
					},
				}).then((res)=>{
					if (res.error_code == 0) {
						if(seater){
							this.TvList= this.TvList.concat(res.datas.list) 
						}else{
							this.TvList=res.datas.list
						}
						if(res.datas.paged.hasmore){
							this.curpage++
						}else{
							this.curpage=false
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						});
					}
				})
			},
			getclass(){//获取分类
				this.$util.request({
					url: '/mobile/index.php?act=live&op=index',
					method: 'get',
					data: {},
				}).then((res)=>{
					if (res.error_code == 0) {
						this.roomClassList=res.datas.class_list
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						});
					}
				})
			},
			getInfo(){//获取搜索历史、热门分类、你可能喜欢
				this.$util.request({
					url: '/mobile/index.php?act=live&op=searchPage',
					method: 'get',
					data: {
					},
				}).then((res)=>{
					if (res.error_code == 0) {
						this.historyList=res.datas.historyList
						this.roomClassList=res.datas.roomClassList
						this.roomList=res.datas.roomList
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						});
					}
				})
			},
			empty(){//清空搜索关键词
				this.searchValue=""
			},
			adddately(){//搜索
				this.IsShow=false
				this.curpage=1
				this.searchRoom();
			},
			NavBtn(index){//搜索类别切换
				this.num=index
				this.curpage=1
				if(!this.IsShow){
					this.searchRoom();
				}
			}
		}
	}
</script>

<style>
	.bgeee{
		background-color: #EEEEEE !important;
	}
	.status_bar {
	    height: var(--status-bar-height);  
	    width: 100%;  
	    background-color: #FFFFFF;
	}  
	.top_view {  
	    height: var(--status-bar-height);  
	    width: 100%;  
	    position: fixed;  
	    background-color: #FFFFFF; 
	    top: 0;  
	    z-index: 999;  
	}
	.UserList .UserInfo .Name{
		font-size: 30rpx;
		color: #333333;
		font-weight: bold;
	}
	.UserList .UserInfo .Name image{
		width: 30rpx;
		height: 30rpx;
		margin-left: 20rpx;
	}
	.UserList .UserInfo .autograph{
		font-size: 24rpx;
		color: #666666;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.UserList .follow{
		line-height: 50rpx;
		padding: 0 20rpx;
		background-color:#E82B57 ;
		color: #FFFFFF;
		height: 50rpx;
		border-radius: 30rpx;
	}
	.UserList .UserInfo{
		width: 470rpx;
	}
	.UserList .portrait image{
		width: 100rpx;
		height: 100rpx;
		border-bottom: 1rpx solid #EEEEEE;
		border-radius: 50%;
	}
	.UserList .portrait{
		height: 100rpx;
	}
	.UserList{
		padding: 20rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}
	.Info .Title{
		font-weight: bold;
	}
	.Info{
		position: absolute;
		bottom: 0;
		z-index: 10;
		width: 100%;
		padding:5rpx 10px;
		color: #FFFFFF;
		box-sizing: border-box;
	}
	.audience{
		position: absolute;
		top: 0;
		z-index: 10;
		width: 100%;
		padding:5rpx 10px;
		color: #FFFFFF;
		box-sizing: border-box;
	}
	.BgImg{
		width: 345rpx;
		height: 420rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 5;
	}
	.TvList{
		width: 345rpx;
		height: 420rpx;
		border-radius: 20rpx;
		overflow: hidden;
		border:1rpx solid #EEEEEE;
		margin-bottom: 20rpx;
		position: relative;
	}
	.TvBox{
		margin: 20rpx;
	}
	.history{
		font-weight: 500;
		font-size: 26rpx;
		margin-right: 30rpx;
	}
	.title{
		padding:20rpx 20upx 0;
		background-color: #FFFFFF;
		font-weight: bold;
		font-size: 32rpx;
	}
	.products{
		box-sizing: border-box;
		width: 750upx;
		display: flex;
		flex-direction: row;		
		flex-wrap: wrap;
		padding: 20upx;
		padding-top: 0;
	}
	.productName{
		margin-right: 20upx;
		margin-top: 20upx;
		background-color: #eeeeee;
		height: 46upx;
		line-height: 46upx;
		border-radius: 23upx;
		padding: 2upx 30upx;
		max-width: 200rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	.NavBox{
		border-bottom: 1rpx solid #EEEEEE;
		padding: 10rpx 0;
	}
	page{
		background-color: #FFFFFF;
		color: rgb(102, 102, 102);
	}
	.active{
		color: #E82B57;
	}
	.flex{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.wrap{
		flex-wrap: wrap;
	}
	.cancel{
		font-size: 32rpx;
		margin-left: 30rpx;
	}
	.empty{
		position: absolute;
		right: 20rpx;
		top: 15upx;
		width: 30rpx;
		height: 30rpx;
		color: #FFFFFF;
		background-color: #999999;
		border-radius: 50%;
		line-height: 30rpx;
		text-align: center;
	}
	.topTitle{
		position: relative;
		padding-top:30upx;
		padding-left: 20upx;
		padding-right: 40upx;
		padding-bottom: 10upx;
		border-bottom: 1rpx solid #EEEEEE;
	}
	.inputBox{
		width: 85%;
		/* #ifdef MP-WEIXIN */
			width: 65%;
		/* #endif */
	}
	.input1{		
		box-sizing: border-box;
		width:100%;
		height: 61upx;
		line-height: 61upx;
		padding-left: 70upx;
		padding-right: 80upx;
		color: #666;
		background-color: #EEEEEE;
		border: 1upx solid #f4f4f4;
		border-radius: 30rpx;
	}
	.searchBtn{
		position: absolute;
		left: 20rpx;
		top: 10upx;
		z-index: 99999;
	}
	.spot{
		display: inline-block;
		width: 15rpx;
		height: 15rpx;
		background-color: #E82B57;
		margin-right: 10rpx;
		border-radius: 50%;
	}
	.spot2{
		background-color:#E82B57;
		padding: 0 10rpx;
		line-height: 36rpx;
		border:3rpx solid #FFFFFF;
		border-radius: 20rpx;
		font-size: 24rpx;
	}
</style>
